<script setup lang="ts">
import {useRoute} from 'vue-router'
import { onMounted, onUpdated, ref, watchEffect } from 'vue'
import SearchResultTab from '@/components/search/SearchResultTab.vue'
import { searchSongService } from "@/apis/search"
const route = useRoute()

const Songs = ref<song_info[]>([])

const key = ref("")
const action = ref("songs")

onMounted(()=>{
  action.value = route.params.action && typeof route.params.action === 'string' ? route.params.action : 'songs'
  key.value = route.params.word && typeof route.params.word === 'string' ? route.params.word: ""
})

onUpdated(()=>{
  action.value = route.params.action && typeof route.params.action === 'string' ? route.params.action : 'songs'
  key.value = route.params.word && typeof route.params.word === 'string' ? route.params.word: ""

})

watchEffect(async () => {
  if(key.value !== ""){
    const res = await  searchSongService({ q:key.value})
    console.log(res.data)
    Songs.value = res.data as song_info[]
  }
})



</script>

<template>
<div class="searchTitle">
  <h1>搜索: {{ key }}</h1>
</div>
<SearchResultTab :songs="Songs">

</SearchResultTab>
</template>

<style scoped lang="scss">

</style>